const { chromium } = require('playwright');
const path = require('path');

async function renderCardWithPlaywright() {
    let browser;
    try {
        console.log('启动 Playwright 浏览器...');
        browser = await chromium.launch({
            headless: true
        });
        console.log('浏览器已启动');

        const page = await browser.newPage();
        
        // 设置视口，留出更多空间确保圆角完整显示
        await page.setViewportSize({ width: 450, height: 950 });

        // 构建HTML文件路径
        const htmlFilePath = path.resolve(__dirname, '../deepseek_html_20250605_fb6f8f.html');
        const localFileUrl = `file://${htmlFilePath}`;

        console.log(`正在加载页面: ${localFileUrl}`);
        await page.goto(localFileUrl, {
            waitUntil: 'networkidle'
        });

        // 等待字体加载
        await page.waitForTimeout(3000);

        // 添加CSS样式以确保背景透明且圆角效果明显
        await page.addStyleTag({
            content: `
                body {
                    background: transparent !important;
                    padding: 30px !important;
                }
                .card-container {
                    border-radius: 20px !important;
                    overflow: hidden !important;
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
                }
            `
        });

        console.log('正在截取名片...');
        const cardElement = page.locator('#business-card');
        
        if (await cardElement.count() > 0) {
            // 获取元素的边界框
            const boundingBox = await cardElement.boundingBox();
            
            // 方案1: 截取整个卡片区域，保持透明背景
            const outputPath1 = path.resolve(__dirname, 'business_card_with_rounded_corners.png');
            await cardElement.screenshot({
                path: outputPath1,
                omitBackground: true // 保持透明背景，这样圆角外的区域就是透明的
            });
            console.log(`圆角透明背景版本已保存到: ${outputPath1}`);

            // 方案2: 截取整个页面区域，包含padding，保持完整的渐变背景
            const outputPath2 = path.resolve(__dirname, 'business_card_with_background.png');
            await page.screenshot({
                path: outputPath2,
                clip: {
                    x: boundingBox.x - 30, // 包含周围的padding
                    y: boundingBox.y - 30,
                    width: boundingBox.width + 60,
                    height: boundingBox.height + 60
                }
            });
            console.log(`完整背景版本已保存到: ${outputPath2}`);

            // 方案3: 使用CSS clip-path 创建真正的圆角截图
            await page.addStyleTag({
                content: `
                    #business-card {
                        clip-path: inset(0 round 20px) !important;
                    }
                `
            });
            
            const outputPath3 = path.resolve(__dirname, 'business_card_clipped.png');
            await cardElement.screenshot({
                path: outputPath3,
                omitBackground: true
            });
            console.log(`CSS裁剪版本已保存到: ${outputPath3}`);

        } else {
            console.error('未找到名片元素 #business-card');
        }

    } catch (error) {
        console.error('渲染过程中出错:', error);
    } finally {
        if (browser) {
            await browser.close();
            console.log('浏览器已关闭');
        }
    }
}

renderCardWithPlaywright();